<template>
    <div class="app-container">
        <el-form ref="form" :model="params" label-width="auto">
            <div class="params-form params-form-gray">
                <el-form-item label="报销单ID">
                    <el-input v-model="params.billNoteId" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="关键词">
                    <el-input v-model="params.description" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="创建时间">
                    <el-date-picker v-model="params.date" type="daterange" start-placeholder="开始时间"
                        end-placeholder="结束时间" value-format="YYYY-MM-DD" />
                </el-form-item>
                <el-form-item label="报销金额">
                    <input-range v-model="params.amount" />
                </el-form-item>
                <el-form-item label="收款账户">
                    <el-input placeholder="请输入" v-model="params.account" />
                </el-form-item>
                <el-form-item label="创建人">
                    <created-by v-model="params.createById" />
                </el-form-item>
                <el-form-item>
                    <el-button :icon="Search" type="primary" @click="init">查询</el-button>
                    <el-button :icon="RefreshRight" plain type="primary" @click="reset">重置</el-button>
                </el-form-item>
            </div>
        </el-form>
        <div class="table-add">
            <el-space>
                <el-button type="primary" @click="excel">导出</el-button>
            </el-space>
        </div>
        <div class="table">
            <el-table :data="data" max-height="calc(100vh - 450px)">
                <el-table-column label="报销单ID" prop="billNoteId" width="200"></el-table-column>
                <el-table-column label="描述" prop="description" width="200"></el-table-column>
                <el-table-column label="创建时间" prop="createTime" width="160"></el-table-column>
                <el-table-column label="创建人" prop="createBy" width="160"></el-table-column>
                <el-table-column label="报销金额" prop="money" width="160"></el-table-column>
                <el-table-column label="关联合作方" prop="description" width="260">
                    <template #default="scope">{{ type[scope.row.partnerType] }}{{ scope.row.partnerName ? '：' + scope.row.partnerName : '--' }}</template>
                </el-table-column>
                <el-table-column label="关联合同" prop="description" width="200"> 
                    <template #default="scope">{{ scope.row.contractName||'空' }}</template>
                </el-table-column>
                <el-table-column label="收款账户" prop="description" width="260">
                    <template #default="scope">{{ scope.row.payName }}{{scope.row.account ? '-' + scope.row.account : '' }}{{
                        scope.row.accountName ? '-' + scope.row.accountName : '' }}</template>
                </el-table-column>
                <el-table-column label="状态" prop="description">
                    <template #default="scope"><el-tag :type="statusList[scope.row.status].color">{{ statusList[scope.row.status].title }}</el-tag></template>
                </el-table-column>
                <el-table-column label="操作" prop="description" fixed="right" width="130">
                    <template #default="scope">
                        <el-button type="primary" link size="small" v-if="scope.row.flowInstanceId"
                            @click="openAudit(scope.row)">审批记录</el-button>
                        <el-button type="primary" link size="small" @click="openDrawer(scope.row)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination">
            <el-pagination v-model:current-page="query.current" v-model:page-size="query.size"
                :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="total"
                @size-change="init" @current-change="init" />
        </div>
        <el-drawer v-model="visible" :with-header="false" @close="close" class="add-reimbursed-drawer">
            <div class="drawer-content">
                <div class="title-box">
                    <custom-title title="报销单详情" />
                    <el-icon @click="visible = false">
                        <Close />
                    </el-icon>
                </div>
                <div class='params-form-gray'>
                    <el-form :model="addForm">
                        <el-form-item label="报销分类" prop="billCategoryId">
                            <div class="preview">{{ getCategoryName(addForm.billCategoryId) }}</div>
                        </el-form-item>
                        <el-form-item label="报销金额" prop="money">
                            <div class="preview">{{ addForm.money }}</div>
                        </el-form-item>
                        <el-form-item label="支付账号" prop="partnerAccountId">
                            <div class="form-item-space">
                                <div class="preview">{{
                                    splicing([addForm.payType, addForm.partnerAccountName, addForm.accountName], ' - ') }}
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item label="合作方" prop="partnerName">
                            <div class="preview">{{ addForm.partnerName || '--' }}</div>
                        </el-form-item>
                        <el-form-item label="报销描述" prop="description">
                            <div class="preview">{{ addForm.description }}</div>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <el-divider style="margin: 0;" v-if="newFormItem.length"></el-divider>
            <div class="drawer-content">
                <div class="oa-form params-form-gray" v-if="newFormItem.length">
                    <form-render ref="formRenderRef" :forms="newFormItem" v-model="formData" />
                </div>
            </div>
        </el-drawer>
        <Audit v-model:show="visibleAudit" v-if="visibleAudit" :code="code" />
    </div>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import { Search, RefreshRight } from '@element-plus/icons-vue';
import { getFormDetail, getDetail, getLoanTree, getAccount as getAccountList, getAllList as getList } from "@/apis/oa/index";
import { exportReimbursement } from "@/apis/oa/reimbursed";
import { useRoute } from "vue-router";
import { payTypeDict } from "@/apis/dict/dict";
import exportExcel from "@/utils/exportExcel";
import { type, splicing } from "@/utils/config";
import Audit from "@/views/audit";

const route = useRoute();
const visible = ref(false)
const statusList = {
    1: { title: '审批中', color: 'warning' },
    2: { title: '未完全核销', color: 'primary' },
    3: { title: '已完全核销', color: 'success' },
    4: { title: '审批未通过', color: 'danger' }
}
const shieldArr = ['金额', '分类', '费用描述', '关联合作方'];
const newFormItem = computed(() => formItemsData.value ? formItemsData.value.filter(v => !shieldArr.includes(v.title)) : []);
const formRenderRef = ref(null);
const formData = ref({})
const formItemsData = ref([])
const params = ref({
    billNoteId: route.query.billNoteId || route.query.code,
    moneyType: 1
});
const query = ref({
    current: 1,
    size: 10
});
const total = ref(0);
const addForm = ref({})
const data = ref([]);
const accountList = ref([])
const openDrawer = async (item) => {
    const res = await getDetail(item.billNoteId);
    addForm.value = res.data;
    const formRes = await getFormDetail(res.data.flowInstanceId);
    formData.value = formRes.data.formData;
    formItemsData.value = formRes.data.formItems?.map(v => ({ ...v, props: { ...v.props, disabled: true } }));
    visible.value = true
}
const getCategoryName = (billCategoryId) => {
    const arr = [];
    const traverse = (tree, billCategoryId) => {
        for (let item of tree) {
            if (item.billCategoryId == billCategoryId) {
                arr.unshift(item.billCategoryName)
                return true;
            } else if (item.children && item.children.length) {
                if (traverse(item.children, billCategoryId)) {
                    arr.unshift(item.billCategoryName);
                    return true;
                };
            }
        }
        return false;
    }
    traverse(loanTree.value, billCategoryId);
    return arr.join(' / ');
}
const close = () => {
    addForm.value = {};
    formItemsData.value = [];
    formData.value = {};
}
const reset = () => {
    params.value = { moneyType: 1 };
    init()
}
const payTypeList = ref([])
const getPayTypeList = async () => {
    const res = await payTypeDict({ status: 1 });
    payTypeList.value = res.data;
}
const getParmas = () => {
    const minAmount = params.value.amount ? params.value.amount[0] : undefined;
    const maxAmount = params.value.amount ? params.value.amount[1] : undefined;
    let startCreateTime = params.value.date ? params.value.date[0] + ' 00:00:00' : undefined;
    let endCreateTime = params.value.date ? params.value.date[1] + ' 23:59:59' : undefined;
    const paramsData = {
        ...params.value,
        minAmount,
        maxAmount,
        startCreateTime,
        endCreateTime
    }
    delete paramsData.date;
    delete paramsData.amount;
    return paramsData;
}
const init = async () => {
    const res = await getList(query.value, getParmas());
    total.value = res.data.total;
    data.value = res.data.list;
}
const loanTree = ref([]);
const getTree = async () => {
    const res = await getLoanTree();
    loanTree.value = res.data;
}
const getAccount = async () => {
    const res = await getAccountList();
    accountList.value = res.data;
}
const excel = async () => {
    const res = await exportReimbursement(getParmas());
    exportExcel(res, '报销列表')
}
/**
 * 审批
 */
const visibleAudit = ref(false)
const code = ref('')
/**
 * 打开审批弹窗
 */
const openAudit = (item) => {
    code.value = item.flowInstanceId;
    visibleAudit.value = true;
}
onMounted(() => {
    init();
    getTree();
    getAccount();
    getPayTypeList()
})
</script>

<style lang="scss" scoped>
$border: 1px solid #DCDFE6;

.params-form {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 50px;

    >div:last-child {
        grid-column: 3;

        ::v-deep(.el-form-item__content) {
            display: flex;
            justify-content: end;
        }
    }

    ::v-deep(.input-range) {
        background: white;
    }
}

.table {
    border: $border;
    $topic: #007DFF;
    ::v-deep(.el-table tr) {
        height: 46px;

        .is-link {
            color: $topic;
        }

        td,
        th {
            border-bottom: $border !important;
        }

        .cell {
            display: flex;
            justify-content: center;
        }
    }

    ::v-deep(.el-table thead tr) {
        background: #F2F6FC;

        >th {
            background: transparent;
            text-align: center;
        }

        .el-table-fixed-column--right {
            background: #F2F6FC;
        }

    }

    ::v-deep(.el-table tbody tr:nth-child(even)) {
        background: #F2F6FC;
    }

    ::v-deep(.el-table tbody tr:last-child) {
        td {
            border-bottom: none !important;
        }

    }

    ::v-deep(.el-table__inner-wrapper) {
        &::before {
            display: none;
        }
    }
    .edit-category{
        width: 16px;
        height: 16px;
    }
}

::v-deep(.add-reimbursed-drawer.rtl) {
    border-radius: 20px 0 0 20px;
    width: 500px !important;
}

::v-deep(.el-drawer__body) {
    padding: 0 !important;
}

.drawer-content {
    padding: 20px;
    padding-bottom: 0;

    .title-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;

        .el-icon {
            font-size: 20px;
        }
    }

    .form-item-space {
        flex: 1;
        display: flex;
        gap: 10px;
    }

    .oa-form {
        max-height: calc(100vh - 380px);
        background: #F6F8FA;
        width: 460px;
        padding: 10px;
        box-sizing: border-box;
    }

    &:first-child {
        .params-form-gray {
            padding-bottom: 20px;
            margin-bottom: 20px;
        }
    }
}

.footer-btn {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.desc {
    word-break: break-all;
    word-wrap: break-word;
    overflow-wrap: break-word;
    padding: 10px 0;
}

.preview {
    word-break: break-all;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.table-add {
    margin: 20px 0;
    display: flex;
    justify-content: space-between;

    ::v-deep(.el-checkbox__inner) {
        border-radius: 50% !important;
        transform: scale(1.2);
    }
}
</style>
